Skip to main content

RecommendationCard Component

A beautiful, modern card component for displaying movie recommendations in the Daggh companion app.

Features​

✨ Visual Design

  • Clean, modern card layout with rounded corners
  • Movie poster display with fallback emoji
  • Professional shadow and elevation effects
  • Subtle press animations and hover states

🎬 Movie Information

  • Movie title (truncated to 2 lines)
  • Year and genre metadata
  • Star rating badge overlay
  • Recommendation reason (italic text)

📱 Responsive Layout

  • Fixed 120px height for consistent grid layout
  • 80px poster width with remaining space for content
  • Proper text truncation and line heights
  • Supports both poster images and fallback states

Design System Integration​

  • Uses Tamagui components and design tokens
  • Follows existing Text component variants
  • Consistent with app's color scheme and spacing
  • Proper TypeScript interfaces and props

Usage​

import { RecommendationCard } from "@/components/cards/RecommendationCard"

;<RecommendationCard movie={movieData} onPress={() => handleCardPress()} />

Props​

  • movie: RecentRecommendation - Movie data from dashboard hook
  • onPress?: () => void - Optional press handler for navigation

Implementation Notes​

  • Extracted from inline component in RecentRecommendations
  • Enhanced with poster images and rating badges
  • Improved visual hierarchy and spacing
  • Added subtle visual effects for better UX